<template>
  <div class="root">
    <div class="left_tree">
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="right">
      <div class="searArea">
        <el-input
          placeholder="安装位置查询"
          v-model="position"
          style="margin-right: 30px"
        >
          <i class="el-icon-search"></i>
        </el-input>

        <el-select
          class="wait-list__filter-item"
          v-model="equipmenType"
          placeholder="请选择设备状态"
          style="margin-right: 30px"
        >
          <el-option label="a" :value="1"></el-option>
          <el-option label="b" :value="2"></el-option>
        </el-select>

        <button class="button" style="margin-right: 25px" @click="search">
          取消
        </button>
        <button class="button" @click="add">保存</button>
      </div>
      <div class="table">
        <yc-table
          class="wait-list__table"
          ref="table"
          type="1"
           :select='true'
          :fit="true"
          url=""
          height="92%"
        >
          <!-- 1底部------------------------------------------------------------------------------- -->
          <!-- <div slot="bottom">
				
			</div> -->
          <!-- 2内容 -->
          <el-table-column label="点位名称">
            <template slot-scope="scope"
              ><div class="modename" @click="handleDetails(scope.row)">
                监控1
              </div></template
            >
          </el-table-column>
          <el-table-column prop="a" label="状态"></el-table-column>
           <el-table-column prop="b" label="设备类型"></el-table-column>

            <el-table-column prop="c" label="创建时间">
                <!-- <template slot-scope="scope">
					<div>
						{{ scope.row.preShelfTimeEnd ? scope.row.preShelfTimeEnd : "-" }}
					</div>
				</template> -->
            </el-table-column>
            
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="flexColumn">
                <button class="button table_button"  style="margin-right: 10px" type="text" @click="handleEdit(scope.row)"
                  >编辑</button
                >
                 <button class="button table_button"  style="margin-right: 10px" type="text" @click="handleStop(scope.row)"
                  >停止任务</button
                >
                <button class="button table_button"  type="text" @click="handleDelete(scope.row)"
                  >删除</button
                >
              </div>
            </template>
          </el-table-column>
        </yc-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      position: "",
      equipmenType: "",
    };
  },
  methods: {
    loadData() {},
    handleNodeClick(data) {
      console.log(data);
    },
    search() {},
    add() {},

    handleDetails() {},
    handleEdit(){

    },
    handleDelete(){

    },
    handleStop(){

    }
  },
};
</script>

<style scoped lang="scss">
.root {
  height: 100%;
  width: 100%;
  display: flex;
  .left_tree {
    min-width: 200px;
    max-width: 200px;
    height: 100%;
    border-right: 1px solid #ccc;
  }
  .right {
    flex: 1;
    .searArea {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 15px 20px;
      .el-input {
        width: 220px;
      }
    }
  }
}
.button {
  height: 30px;
  line-height: 30px;
  padding: 0 30px;
  color: #1996fa;
  background: #e6f1fc;
  border: 1px solid #d0e7fe;
  border-radius: 5px;
}
.table_button{
    padding: 0 10px;
}
</style>
